<script setup lang="ts">
import { Button, Card, CardMeta, TypographyText } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";

const props = defineProps({
  cover: String,
  courseTitle: String,
  teacherName: String,
  url: String,
  description: String,
})

const gotoCourse = () => {
  window.open(props.url, '_blank')
}
</script>

<template>
  <Card hoverable class="h-[185px]">
    <div class="flex gap-5 mt-4 cursor-pointer" @click="gotoCourse">
      <img
        alt="课程封面"
        :src="cover"
        class="h-[130px] w-[185px] object-cover rounded-md"
      >
      <div class="flex-1 flex flex-col justify-between">
        <CardMeta
          :title="courseTitle"
          :description="teacherName"
          class="mb-2.5"
        />
        <!-- <TypographyText type="secondary" class="block mb-2.5">
          {{ description }}
        </TypographyText> -->
        <div class="flex items-center justify-between">
          <TypographyText type="secondary" class="flex items-center">
            <UserOutlined class="mr-1" type="user-outlined" />
            <span>40k已学习</span>
          </TypographyText>
          <Button
            type="primary"
            size="small"
            class="rounded bg-[#e6f0ff] text-[#4b69f4] border-[#e6f0ff] hover:bg-[#d1e3ff]"
          >
            进入课程
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>
